<template>
	<view class="content">
		<view class="top">
			<view class="AvatarAndNickname">
				<view class="header_left">
					<view class="Avatar">
						<image :src="'http://cdn.gdxywsw.club/' + othersInfo.avatar"></image>
					</view>

					<view class="NicknameAndUid">
						<view class="NicknameAndGender">
							<view class="Nickname" :style="{fontSize:othersInfo.nickname.length>4?'15px':'18px'}">
								{{ othersInfo.nickname }}</view>
							<view class="Gender">
								<image v-if="othersInfo.gender=='男'" src="../../static/images/man.png"></image>
								<image v-else src="../../static/images/female.png"></image>
							</view>
						</view>
						<view class="Uid">uid: {{othersInfo.uid }}</view>
					</view>

				</view>
				<view class="header_right">
					<button v-if="!isConcern" type="primary" style="margin-right: 8px;" size="mini"
						@click="concern">关注</button>
					<button v-else type="warn" size="mini" style="margin-right: 8px;" @click="unConcern">取消关注</button>
				</view>
			</view>
		</view>
		<view class="userInfoContent">
			<othersInfo :propUid="otherUid" :otherInfo="othersInfo"></othersInfo>
		</view>

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="1500"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	// import {
	// 	mapState
	// } from 'vuex'
	export default {
		data() {
			return {
				otherUid: '',
				othersInfo: [],
				msgType: '',
				messageText: '',
				isConcern: false
			};
		},
		// computed: {
		// 	...mapState('my_Info', ['userInfo'])
		// },
		onLoad: function(options) {

			this.otherUid = JSON.parse(decodeURIComponent(options.otherUid)) + ''
			this.hasConcern()

		},
		created() {

		},
		mounted() {

			this.getOthersInfo()

		},
		methods: {
			async getOthersInfo() {
				let {
					data: res
				} = await uni.$http.get('/users/getDetail/' + this.otherUid)

				if (res.code == 2000) {
					this.othersInfo = res.data
				} else {
					uni.showToast({
						title: '数据出错',
						duration: 1500,
						icon: "none"
					})
				}
			},
			// 关注某人
			async concern() {
				let {
					data: res
				} = await uni.$http.put('/users/subscribe/' + this.otherUid)
				if (res.code == 2000) {
					this.isConcern = true
					this.msgType = 'success'
					this.messageText = '关注成功'
					this.$refs.message.open()

				} else {
					this.msgType = 'error'
					this.messageText = '关注失败'
					this.$refs.message.open()
				}
			},
			//取消关注
			async unConcern() {
				let {
					data: res
				} = await uni.$http.put('/users/cancelSubscribe/' + this.otherUid)
				if (res.code == 2000) {
					this.isConcern = false
					this.msgType = 'success'
					this.messageText = '取关成功'
					this.$refs.message.open()
				} else {
					this.msgType = 'error'
					this.messageText = '取关失败'
					this.$refs.message.open()
				}
			},
			// 是否关注
			async hasConcern() {
				let {
					data: res
				} = await uni.$http.get('/users/hasSubscribed/' + this.otherUid)
				if (res.code == 2000) {
					this.isConcern = res.data
				} else {
					uni.showToast({
						title: '数据加载出错',
						duration: 1500,
						icon: 'error'
					})
				}

			}


		},

		onPullDownRefresh() {
			this.$children[0].refresh()
		},

		onReachBottom() {
			let {
				isloading,
				getPublicMsgsList,
				checked,
				getLikeMsgsList
			} = this.$children[0]

			switch (checked) {
				case 0:
					if (isloading) return
					getPublicMsgsList()
					break
				case 1:
					if (isloading) return
					getLikeMsgsList()
					break
				case 2:
					if (isloading) return
					this.getSpitMessages()
					break
				case 3:
					if (isloading) return
					this.getAnnouncementMessages()
					break
				case 4:
					if (isloading) return
					this.getLostAndFoundMessages()
					break
			}
		}

	}
</script>

<style lang="less">
	.AvatarAndNickname {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.header_left {
			display: flex;

			.Avatar image {
				width: 75px;
				height: 75px;
				object-fit: cover;
				border-radius: 50%;
				border: 3px solid rgb(247, 247, 249);
			}

			.NicknameAndUid {
				margin-top: 20px;
				margin-left: 5px;

				.NicknameAndGender {
					display: flex;
				}

				.Nickname {
					font-weight: bolder;
					font-size: 20px;
				}

				.Gender {
					margin-left: 10px;
					margin-top: 2px;
				}

				.Gender>image {
					width: 20px;
					height: 20px;
				}
			}
		}


		.header_right {}
	}
</style>
